<template>
	<div class="matching">
		<TopInfo />
		<TopTabs />
		<div class="content">
			<div class="filter-part">
				<div class="search-part">
					<el-input
						placeholder="请输入关键词搜索"
						v-model="keywords"
						prefix-icon="el-icon-search"
						class="input-with-select"
						@keyup.enter.native="SearchList()"
					>
						<el-button
							slot="append"
							type="primary"
							@click="SearchList()"
							>搜索</el-button
						>
					</el-input>
				</div>
				<div class="area">
					<div class="title fl">政策类型：</div>
					<ul class="area-list fl">
						<li
							:class="typeid == 1 ? 'active' : ''"
							@click="ChangeZc(1)"
						>
							申报通知
						</li>
						<li
							:class="typeid == 2 ? 'active' : ''"
							@click="ChangeZc(2)"
						>
							公示公告
						</li>
						<li
							:class="typeid == 3 ? 'active' : ''"
							@click="ChangeZc(3)"
						>
							政策动态
						</li>
					</ul>
				</div>
				<div class="year">
					<div class="title fl">时间：</div>
					<ul class="year-list fl">
						<li
							:class="day == 0 ? 'active' : ''"
							@click="ChangeDays(0)"
						>
							全部通知
						</li>
						<li
							:class="day == 7 ? 'active' : ''"
							@click="ChangeDays(7)"
						>
							最近7天发布
						</li>
						<li
							:class="day == 30 ? 'active' : ''"
							@click="ChangeDays(30)"
						>
							最近30天发布
						</li>
					</ul>
				</div>
			</div>
			<div class="match-count">
				为你查找到<span>{{ count }}</span
				>条记录
			</div>
			<ul class="matching-list">
				<li
					@click="ToNewsDetail(item.Id)"
					v-for="item in newsData"
					:key="item.Id"
				>
					<div class="line1">{{ item.Title }}</div>
					<!-- <div class="line2">地区：湖南省</div> -->
					<div class="line3">
						<span class="fl">{{ item.ReptileName }}</span>
						<!-- <span class="fr">资助额度：500万元</span> -->
					</div>
					<div class="line4">
						<span class="fl">发布时间：{{ item.SendTime }}</span>
						<span class="fr">
							<!-- 匹配度： -->
							<i
								:class="
									item.IsCollect
										? 'el-icon-star-on star'
										: 'el-icon-star-off star2'
								"
								@click.stop="Save(item.Id)"
							></i>
						</span>
					</div>
				</li>
			</ul>
			<infinite-loading
				@infinite="infiniteHandler"
				style="margin-top: 30px"
			>
				<span slot="no-more" style="color: #999; font-size: 18px"
					>到底了！</span
				>
			</infinite-loading>
		</div>
		<BottomInfo />
		<!-- <el-backtop target=".matching">
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
    </el-backtop> -->
		<!-- <el-backtop target=".matching" :visibility-height=400></el-backtop> -->
	</div>
</template>

<script>
import BottomInfo from "../components/BottomInfo";
import TopInfo from "../components/TopInfo";
import TopTabs from "../components/TopTabs";
import InfiniteLoading from "vue-infinite-loading";
export default {
	name: "News",
	data() {
		return {
			keywords: "",
			activeTabs: 0,
			limit: 10,
			page: 0,
			day: 0,
			typeid: 1,
			loading: false,
			// finished: false,
			newsData: [],
			isLoading: true,
			count: 0,
		};
	},
	components: {
		BottomInfo,
		TopInfo,
		TopTabs,
		InfiniteLoading,
	},
	created() {
		// this.infiniteHandler();
	},
	methods: {
		ToNewsDetail(id) {
			this.$router.push({ name: "NewsDetail", query: { id } });
			this.$cookies.set("TopActive", 9);
		},
		// GetList() {
		//   this.$axios({
		//     url: "/Policy/GetPolicyList",
		//     method: "post",
		//     data: {
		//       limit: this.limit,
		//       page: this.page,
		//       day: this.day,
		//       typeid: this.typeid,
		//       title: this.keywords,
		//       userdata: this.$cookies.get("userdata"),
		//     },
		//     transformRequest: [
		//       function (data) {
		//         let ret = "";
		//         for (let it in data) {
		//           ret +=
		//             encodeURIComponent(it) +
		//             "=" +
		//             encodeURIComponent(data[it]) +
		//             "&";
		//         }
		//         return ret;
		//       },
		//     ],
		//     headers: {
		//       "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
		//     },
		//   })
		//     .then((res) => {
		//       //console.log(res.data.data);
		//       this.count = res.data.count;
		//       let rows = res.data.data;
		//       // this.loading = false;
		//       // if (rows == null || rows.length === 0) {
		//       // 加载结束
		//       // this.finished = true;
		//       // return;
		//       // }
		//       this.newsData = this.newsData.concat(rows);
		//       // this.isLoading = false;
		//     })
		//     .catch((err) => {
		//       //console.log(err);
		//     });
		// },
		infiniteHandler($state) {
			this.$axios({
				url: "/Policy/GetPolicyList",
				method: "post",
				data: {
					limit: this.limit,
					page: Math.ceil(this.newsData.length / 10 + 1),
					day: this.day,
					typeid: this.typeid,
					title: this.keywords,
					userdata: this.$cookies.get("userdata"),
				},
				transformRequest: [
					function (data) {
						let ret = "";
						for (let it in data) {
							ret +=
								encodeURIComponent(it) +
								"=" +
								encodeURIComponent(data[it]) +
								"&";
						}
						return ret;
					},
				],
				headers: {
					"Content-Type":
						"application/x-www-form-urlencoded; charset=UTF-8",
				},
			}).then((response) => {
				if (response.data.data.length) {
					// response.data为你请求接口返回的数组列表
					this.count = response.data.count;
					this.newsData = this.newsData.concat(response.data.data);
					$state?.loaded();
					if (this.newsData.length / 10 === 10) {
						// 这里是加载了10页数据，设置不在加载
						$state.complete();
						this.count = 0;
					}
				} else {
					$state.complete();
					this.count = 0;
				}
			});
		},
		SearchList() {
			// this.page = 1;
			this.newsData = [];
			this.infiniteHandler();
		},
		ChangeZc(n) {
			this.typeid = n;
			this.keywords = "";
			this.newsData = [];
			this.infiniteHandler();
		},
		ChangeDays(day) {
			this.day = day;
			this.keywords = "";
			this.newsData = [];
			this.infiniteHandler();
		},
		Save(id) {
			let a = id;
			this.$axios({
				url: "/User/AddUserCollect",
				method: "post",
				data: {
					userdata: this.$cookies.get("userdata"),
					policyid: a,
					typeid: 4,
				},
				transformRequest: [
					function (data) {
						let ret = "";
						for (let it in data) {
							ret +=
								encodeURIComponent(it) +
								"=" +
								encodeURIComponent(data[it]) +
								"&";
						}
						return ret;
					},
				],
				headers: {
					"Content-Type":
						"application/x-www-form-urlencoded; charset=UTF-8",
				},
			})
				.then((res) => {
					for (let i = 0; i < this.newsData.length; i++) {
						if (this.newsData[i].Id == a) {
							this.newsData[i].IsCollect =
								!this.newsData[i].IsCollect;
						}
					}
					this.$message({
						message: res.data.msg,
						type: "success",
					});
				})
				.catch((err) => {
					//console.log(err);
				});
		},
	},
};
</script>

<style scoped>
.matching {
	min-height: 800px;
	/* overflow-y: auto; */
}
.content {
	background-color: #f4f6fc;
	padding: 25px 0;
}
.filter-part {
	background-color: #fff;
	box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
	margin: 0 auto;
	width: 1200px;
	padding: 25px;
	box-sizing: border-box;
	padding-bottom: 0;
}
.search-part {
	padding: 30px 280px;
	border-bottom: 1px solid #eeeeee;
}
.area,
.year {
	padding: 12px 0;
	border-bottom: 1px solid #eeeeee;
	box-sizing: border-box;
	overflow: hidden;
	color: #333;
	font-size: 14px;
}
.year {
	border-bottom: none;
}
.area .title,
.year .title {
	width: 120px;
	text-align: center;
	padding: 5px 8px;
	box-sizing: border-box;
}
.area-list,
.year-list {
	width: 1030px;
}
.area-list li,
.year-list li {
	float: left;
	cursor: pointer;
	margin-right: 20px;
	padding: 5px 8px;
}
.area-list li:last-child,
.year-list li:last-child {
	margin-right: 0;
}
.area-list li.active,
.year-list li.active {
	color: #fff;
	background-color: #095aff;
}
.area-list li:hover,
.year-list li:hover {
	color: #fff;
	background-color: #095aff;
}
.match-count {
	width: 1200px;
	margin: 25px auto;
	height: 50px;
	line-height: 50px;
	background: #ffffff;
	color: #333;
	font-size: 14px;
	text-align: center;
}
.match-count span {
	color: #095aff;
	font-weight: bold;
	margin: 0 5px;
}
.matching-list {
	width: 1200px;
	background: #ffffff;
	box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
	margin: 0 auto;
	padding: 25px 35px;
	box-sizing: border-box;
}
.matching-list li {
	padding: 25px 30px;
	border-radius: 10px;
	color: #333333;
	font-size: 16px;
	cursor: pointer;
}
.matching-list li:nth-child(2n + 1) {
	background: #f7f7f7;
}
.matching-list li .line1 {
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 20px;
}
.matching-list li .line2 {
	margin-bottom: 10px;
}
.matching-list li .line3 {
	margin-bottom: 10px;
	overflow: hidden;
}
.matching-list li .line3 > span.fl {
	color: #d74248;
	border: 1px solid #d74248;
	padding: 2px 5px;
}
.matching-list li .line4 {
	overflow: hidden;
}
.matching-list li .line4 .star {
	color: #ffd34c;
	font-size: 30px;
	float: right;
	cursor: pointer;
}
.matching-list li .line4 .star2 {
	color: #ffd34c;
	font-size: 30px;
	float: right;
	cursor: pointer;
}
</style>
